<template>
    <div class="listeningPractice">

        <div class="dataList">
            <div class="lableContent">
                <div style="width: 8%;">
                    序号
                </div>
                <div style="width: 30%;">
                    学生
                </div>
                <div style="width: 12%;">
                    当前等级
                </div>
                <div style="width: 12%;">
                    打卡天数
                </div>
                <div style="width: 12%;">
                    已练大题数
                </div>
                <div style="width: 12%;">
                    平均首次正答率
                </div>
                <div style="width: 12%;">
                    已练总时长
                </div>
            </div>

            <div class="contentList">
                <div class="listItem" v-for="(item, index) in 10" :key="index">
                    <div style="width: 8%;">
                        {{ index + 1 }}
                    </div>
                    <div style="width: 30%;">
                        李忆梦
                    </div>
                    <div style="width: 12%;">
                        3级A
                    </div>
                    <div style="width: 12%;">
                        3
                    </div>
                    <div style="width: 12%;">
                        3
                    </div>
                    <div style="width: 12%;">
                        100%
                    </div>
                    <div style="width: 12%;">
                        78min
                    </div>
                </div>

            </div>

        </div>

        <div class="pageBox">
            <el-pagination @current-change="handleCurrentChange" background :current-page.sync="pageInfo.limit"
                :page-size="pageInfo.limit" layout="total, prev, pager, next" :total="pageInfo.total">
            </el-pagination>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            pageInfo: {
                page: 1,
                limit: 10,
                total: 100,
            },
        }
    },
    methods: {
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.page = val
        },
    }
}
</script>
<style scoped lang="scss">
.listeningPractice {
    width: 100%;
    height: 585px;
    margin-top: 16px;
    padding: 16px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 4px 4px 4px 4px;
    position: relative;

    .dataList {
        .lableContent {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.4);
            line-height: 20px;
            display: flex;
        }

        .contentList {
            .listItem {
                display: flex;
                align-items: center;
                height: 48px;
                border-top: 1px solid #E7E7E7;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: rgba(0, 0, 0, 0.9);
                line-height: 20px;
                
            }
            .listItem:hover{
                background-color: #EAF9E8;
            }
        }
    }

    .pageBox {
        position: absolute;
        bottom: 5px;
        right: 60px;
    }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #4BA840;
}

::v-deep .el-pagination.is-background .el-pager li:hover {
    color: #ffffff;
    background-color: #4BA840;
}
</style>